<template>
	<el-row class="top">
		<el-col class="center">
			<!-- 文本 -->
			<el-dropdown class="plugins-nav" trigger="click" @command="onAddTextInput" :hide-on-click="true" v-once>
				<el-button class="plugins-nav-btn" type="text">
					<i class="jy-icon-text"></i>文本<i class="jy-icon-arrow"></i>
				</el-button>
        <template #dropdown>
          <el-dropdown-menu class="plugins-nav-list">
            <el-dropdown-item class="plugins-nav-item" v-for="(item, index) in state_.fontSizes" :key="index" :command="index">{{item.text}}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
			</el-dropdown>

			<!-- 媒体 -->
			<el-dropdown class="plugins-nav" trigger="click" placement="top" :hide-on-click="true">
				<el-button class="plugins-nav-btn" type="text">
					<i class="jy-icon-media"></i>媒体<i class="jy-icon-arrow"></i>
				</el-button>
        <template #dropdown>
          <el-dropdown-menu class="plugins-media-list">
            <el-radio-group v-model="state.tabPosition" style="margin-bottom: 5px;" @change="onChangeMedia">
              <el-radio-button :label="MEDIAS.image.type">图片</el-radio-button>
              <el-radio-button :label="MEDIAS.audio.type">音频</el-radio-button>
              <el-radio-button :label="MEDIAS.video.type">视频</el-radio-button>
            </el-radio-group>
            <media-layout :item="state.mediaItem" :isPop="false"></media-layout>
          </el-dropdown-menu>
        </template>
			</el-dropdown>

			<!-- 表单 -->
			<el-dropdown class="plugins-nav" trigger="click" @command="onAddComponent" placement="top" v-once>
				<el-button class="plugins-nav-btn" type="text">
					<i class="jy-icon-form"></i>表单<i class="jy-icon-arrow"></i>
				</el-button>
        <template #dropdown>
          <el-dropdown-menu class="clear-ed plugins-comp-list" style="width: 500px;">
            <li class="comp-list-box" v-for="(item, index) in state_.pluginsFormLists" :key="index">
              <el-row class="comps-list">
                <el-dropdown-item
                  v-for="(btnItem, btnIndex) in item.lists"
                  :key="btnIndex"
                  :command="btnItem">
                  <el-button
                    type="text"
                    :disabled="btnItem.bIsDisabled">
										<el-icon><i :class="btnItem.icon"></i></el-icon>
                    {{btnItem.text}}
                  </el-button>
                </el-dropdown-item>
              </el-row>
            </li>
          </el-dropdown-menu>
        </template>
			</el-dropdown>

			<!-- 插件 -->
			<el-dropdown class="plugins-nav" trigger="click" @command="onAddWBComponent" placement="top" :hide-on-click="true" v-once>
				<el-button class="plugins-nav-btn" type="text">
					<i class="jy-icon-plugin"></i>插件<i class="jy-icon-arrow"></i>
				</el-button>
        <template #dropdown>
          <el-dropdown-menu class="clear-ed plugins-comp-list" style="width: 610px;">
            <li class="comp-list-box" v-for="(item, index) in state_.pluginsCompLists" :key="index">
              <span class="comp-title" v-html="item.title"></span>
              <el-row class="comps-list">
                <el-dropdown-item
                  v-for="(btnItem, btnIndex) in item.lists"
                  :key="btnIndex"
                  :disabled="btnItem.bIsDisabled"
                  :command="btnItem.cid">
                  <el-button
                    type="text"
                    :disabled="btnItem.bIsDisabled">
										<el-icon><i :class="btnItem.icon"></i></el-icon>
                    {{btnItem.text}}
                  </el-button>
                </el-dropdown-item>
              </el-row>
            </li>
          </el-dropdown-menu>
        </template>
			</el-dropdown>

			<!-- 矢量组件 -->
			<el-dropdown v-if="state_.groupComponentLists.length > 0" class="plugins-nav" trigger="click" @command="onAddGroupComponent" placement="top" v-once>
				<el-button class="plugins-nav-btn" type="text">
					<i class="jy-icon-plugin"></i>矢量<i class="jy-icon-arrow"></i>
				</el-button>
        <template #dropdown>
          <el-dropdown-menu class="clear-ed plugins-comp-list" style="width: 610px;">
            <li class="comp-list-box" v-for="(item, index) in state_.groupComponentLists" :key="index">
              <span class="comp-title" v-html="item.title"></span>
              <el-row class="comps-list">
                <el-dropdown-item
                  v-for="(btnItem, btnIndex) in item.lists"
                  :key="btnIndex"
                  :disabled="btnItem.bIsDisabled"
                  :command="btnItem.cid">
                  <el-button
                    type="text"
                    :disabled="btnItem.bIsDisabled">
										<el-icon><i :class="btnItem.icon"></i></el-icon>
                    {{btnItem.text}}
                  </el-button>
                </el-dropdown-item>
              </el-row>
            </li>
          </el-dropdown-menu>
        </template>
			</el-dropdown>
		</el-col>
	</el-row>
</template>

<script setup lang="ts">
import MediaLayout from '@/views/child/media-layout.vue'
import { MEDIAS, TextInputStyles, PluginsFormLists, GroupComponentLists, PluginsCompLists } from '@/const/web/'
import { COMMON_WID_HEI, COMPONENT_TYPES}  from '@/const/'
import { useWebComponentStore } from '@/store/web/component'
import { useWebPageStore } from '@/store/web/page'
import { ComponentTypesDefaultDom } from '@/store/models/component-default-data'
import { useWebMediaStore } from '@/store/web/media'

const state =  reactive({
  tabPosition: 0,
  mediaItem: MEDIAS.image
})
const state_ = {
  fontSizes: TextInputStyles,
  pluginsFormLists: PluginsFormLists,
  groupComponentLists: GroupComponentLists,
  pluginsCompLists: PluginsCompLists
}
const useWebComponent = useWebComponentStore()
const useWebPage = useWebPageStore()
const useWebMedia = useWebMediaStore()
const mediaAllData = useWebMedia.mediaAllData

const onAddTextInput = (index: number) => {
  const fontData = state_.fontSizes[index]
  const fontSize = fontData.fontSize
  const width = (fontData.text.length + 2) * fontSize*COMMON_WID_HEI.designScale + 20
  const height = fontSize*COMMON_WID_HEI.designScale
  const componentData = _.cloneDeep(ComponentTypesDefaultDom[fontData.cid])
  componentData.commonAttr.text = fontData.text
  componentData.commonAttr.fontSize = _.parseInt(fontSize)
  componentData.conAttr.width = _.parseInt(width)
  componentData.conAttr.height = _.parseInt(height)
  useWebPage.addComponent(componentData)
}
const onChangeMedia = (mediaType: number) => {
  if(mediaType == MEDIAS.image.type) {
    state.mediaItem = MEDIAS.image
  }else if(mediaType == MEDIAS.video.type) {
    state.mediaItem = MEDIAS.video
  }else if(mediaType == MEDIAS.audio.type) {
    state.mediaItem = MEDIAS.audio
  }
  if(!mediaAllData[state.mediaItem.type]) {
    useWebMedia.getMediaData({ page: 1, pageSize: 20, type: state.mediaItem.type })
  }
}
const onAddWBComponent = (cid: number) => {
  const componentData = _.cloneDeep(ComponentTypesDefaultDom[cid])
  let width = 0;
  let height = 0;
  if(componentData.cid == COMPONENT_TYPES.wb_imgs) {
    width = COMMON_WID_HEI.width
    height = _.parseInt(width/16 * 9)
    _.merge(componentData.conAttr, { width, height })
  }
  useWebPage.addComponent(componentData)
}
const onAddComponent = ({ cid }) => {
  const componentData = _.cloneDeep(ComponentTypesDefaultDom[cid])
  useWebPage.addComponent(componentData)
}
const onAddGroupComponent = (cid: number) => {
  const componentData = _.cloneDeep(ComponentTypesDefaultDom[cid])
  useWebPage.addComponent(componentData)
}

const initComp = () => {
  state.tabPosition = MEDIAS.image.type
  state.mediaItem = MEDIAS.image
  const mediaData = mediaAllData[state.mediaItem.type]
  if(!mediaData || !mediaData.page) {
    useWebMedia.getMediaData({ page: 1, pageSize: 20, type: state.mediaItem.type })
  }
}
initComp()
</script>

<style lang="scss" scoped>
	.plugins-nav-list {
		li.el-dropdown-menu__item {
			line-height: initial !important;
			padding: 5px 20px !important;
		}
	}

	.top {
		position: absolute;
		height: 60px;
		top: 0;
		left: 46.5%;
		transform: translateX(-50%);
		z-index: 10;
		display: flex;
		align-items: center;

		.plugins-nav {
			margin-right: 6px;
			&:last-child {
				margin-right: 0;

				.plugins-nav-btn{
					border-right: none;
				}
			}
		}
		.plugins-nav-btn {
			padding: 4px 6px 4px 6px;

			color: #fff;
			border-right: 1px solid #fff;
			border-radius: 0;
		}
		.plugins-nav-btn [class*="el-icon-"]+span {
			margin-left: 0 !important;
		}
	}

	.center {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 34px;
		padding-left: 6px;
		// text-align: center;

		background: #127BFF;
		border-radius: 3px;
	}

	.right {
		text-align: right;
	}
	.plugins-comp-list{
		list-style: none;

		li.comp-list-box{
			list-style: none;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			border-bottom: 1px solid #EDEFF2;

			.comp-title{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 99px;

				background: #F3F5FA;
				font-size: 12px;
				color: #43475C;

				p{
					margin-top: 10px;
					line-height: 1.3;
				}
			}
			.comps-list{
				flex: 1;
				width: 100%;
				min-width: 0;
				padding: 10px 0;
				margin-left: 20px;
				display: flex;
				flex-wrap: wrap;

				li{
					padding: 0;
					margin: 0;
					width: 24.5%;
				}
				li:active, :hover, :focus{
					background-color: inherit;
					color: inherit;
				}

				button{
					// width: 25%;
					text-align: left;
					margin: 0;
					padding: 10px;

					font-size: 14px;
					color: #43475C;
				}
				button:hover{
					color: #66b1ff;
				}
				button:active, :focus{
					color: #66b1ff;
					background-color: #ecf5ff;
				}
				button:disabled,
				button[disabled]{
					color: #c0c4cc;
				}
			}
		}
		li:nth-last-child(2) {
			border-bottom: none;
		}
	}

	.plugins-media-list{
		padding: 10px 16px;
    min-height: 200px;
		li {
			width: 623px;
			word-break: break-all;
			word-wrap: wrap;
			border-top: 1px solid #EDEFF2;
			padding-top: 12px;
		}
	}
</style>
